import { Component, Input, Output, OnInit } from '@angular/core';
import { EventEmitter } from 'events';

@Component ({
  selector: 'list-item',
  template: `
    <div class="contact-info">
      <input type="text" value="{{name}}" [(ngModel)]="name" />
      <label class="contact-name">{{ contact.name }}</label>
      <span class="contact-tel">{{ contact.tel }}</span>
    </div>
  `,
})

// 使用@Input 交互
// export class ListItemComponent implements OnInit {
//   name = '张三';
//   phone = '13800000000';
//   @Input() contact: any = {name: name, tel: this.phone};
//   @Output() routerNavigate = new EventEmitter();
//   ngOnInit(): void {
//     console.log('item init');
//   }
// }

// 通过get和set交互，在原型对象上设置了一个contact属性
export class ListItemComponent implements OnInit {
  name = '张三';
  phone = '13800000000';
  _contact: any = {};
  @Input()
  set contact(contact: any) {
    this._contact.name = (contact.name && contact.name.trim()) || 'no name set';
    this._contact.tel = contact.tel || '0000-0000';
  }
  get contact() {
    return this._contact;
  }
  @Output() routerNavigate = new EventEmitter();
  ngOnInit(): void {
    // throw new Error('Method not implemented.');
    console.log('item init');
  }
}
